<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">信息列表</h2>
    <router-link class="btn btn-success mr5 mt10 mb10" to="/newstudent">添加信息</router-link>
    <a
      class="btn btn-danger mr5 mt10 mb10"
      @click.prevent="deleteStudentHistorys"
      v-show="showCheckBox"
    >删除选中</a>
    <a class="btn btn-danger mr5 mt10 mb10" @click.prevent="showCheck">{{ deleteText }}</a>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th v-if="showCheckBox">
              <input type="checkbox" name="checkAll" v-model="checkAll" @change="changeChecked" id />
            </th>
            <th>#</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in studentHistorys" :key="student.id">
            <td v-if="showCheckBox">
              <input
                :value="student.id"
                type="checkbox"
                :name="student.id"
                v-model="checkModel"
                :id="student.id"
              />
            </td>
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.gender == 0 ? '男':'女' }}</td>
            <td>{{ student.age}}</td>
            <td>{{ student.hobbies }}</td>
            <td>{{ student.time }}</td>
            <td>
              <router-link
                to="/students"
                class="btn btn-success btn-sm mr5"
                :thisStudent="student"
                @click.native="reduction(student.id,student)"
              >还原</router-link>
              <a class="btn btn-danger btn-sm" @click="deleteStudentHistory(student.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  props: ["studentHistorys"],
  data() {
    return {
      checkAll: false,
      checkModel: [],
      showCheckBox: false,
      deleteText: "批量删除"
    };
  },
  methods: {
    deleteStudentHistory(studentID) {
      this.$http
        .get("/history/delete", { params: { studentID } })
        .then(() => {
          this.$parent.getStudentsHistory();
          Toast({
            message: "ID为" + studentID + "的信息删除成功",
            position: "middle",
            duration: 1000,
            iconClass: "glyphicon glyphicon-ok"
          });
        })
        .catch(function() {
          console.log("服务器异常！");
        });
    },
    reduction(index, student) {
      var formData = JSON.stringify(student);
      this.$http
        .post("/students/new", formData)
        .then(() => {
          this.$parent.getStudents();
          Toast({
            message: "还原信息成功！",
            position: "middle",
            duration: 1000,
            iconClass: "glyphicon glyphicon-ok"
          });
        })
        .catch(function() {
          console.log("服务器异常！");
        });

      var id = parseInt(index);
      this.$http
        .get("/history/delete", { params: { id } })
        .then(() => {
          this.$parent.getStudentsHistory();
          Toast({
            message: "信息删除成功！",
            position: "middle",
            duration: 1000,
            iconClass: "glyphicon glyphicon-ok"
          });
        })
        .catch(function() {
          console.log("服务器异常！");
        });
    },
    deleteStudentHistorys() {
      if (this.checkModel.length == 0) {
        Toast({
          message: "请选择要删除的信息",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      }
      for (var i = 0; i <= this.checkModel.length - 1; i++) {
        var id = parseInt(this.checkModel[i]);
        this.$http
          .get("/history/delete", { params: { id } })
          .then(() => {
            this.$parent.getStudentsHistory();
            Toast({
              message: "选中的信息删除成功",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          })
          .catch(function() {
            console.log("服务器异常！");
          });
      }
    },
    showCheck() {
      this.showCheckBox = !this.showCheckBox;
      if (this.showCheckBox == true) this.deleteText = "取消";
      else this.deleteText = "批量删除";
    },
    changeChecked() {
      if (this.checkAll == true) {
        this.studentHistorys.forEach(value => {
          this.checkModel.push(value.id);
        });
      }
    }
  },
  watch: {
    checkModel: function() {
      if (this.checkModel.length == this.studentHistorys.length)
        this.checkAll = true;
      else this.checkAll = false;
    }
  }
};
</script>
<style>
</style>